<script setup>
import { ref } from 'vue'
import axios from 'axios'

const currentQuestionIndex = ref(0)
const isTestStarted = ref(false)
const questions = ref([])

const startTest = async () => {
  try {
    const response = await axios.get('/api/questions')
    questions.value = response.data
    isTestStarted.value = true
  } catch (error) {
    console.error('获取题目失败:', error)
  }
}

const nextQuestion = () => {
  if (currentQuestionIndex.value < questions.value.length - 1) {
    currentQuestionIndex.value++
  }
}

const prevQuestion = () => {
  if (currentQuestionIndex.value > 0) {
    currentQuestionIndex.value--
  }
}

const endTest = () => {
  isTestStarted.value = false
  currentQuestionIndex.value = 0
}
</script>

<template>
  <div class="test-control">
    <h2>测试控制</h2>
    
    <!-- 测试控制按钮 -->
    <div class="control-buttons">
      <el-button 
        type="primary" 
        @click="startTest"
        v-if="!isTestStarted"
      >
        开始测试
      </el-button>
      
      <template v-else>
        <el-button @click="prevQuestion">上一题</el-button>
        <el-button type="primary" @click="nextQuestion">下一题</el-button>
        <el-button type="danger" @click="endTest">结束测试</el-button>
      </template>
    </div>
    
    <!-- 当前题目展示 -->
    <div class="current-question" v-if="isTestStarted && questions[currentQuestionIndex]">
      <h3>当前题目 ({{ currentQuestionIndex + 1 }}/{{ questions.length }})</h3>
      <p>{{ questions[currentQuestionIndex].content }}</p>
    </div>
    
    <!-- 测试统计 -->
    <div class="test-stats" v-if="isTestStarted">
      <h3>测试统计</h3>
      <!-- 这里可以添加统计图表 -->
    </div>
  </div>
</template>

<style scoped>
.test-control {
  padding: 20px;
}
.control-buttons {
  margin: 20px 0;
}
.current-question {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
}
.test-stats {
  margin-top: 30px;
}
</style>